<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pointDataResult</title>
  </head>
  <body>
    <script>
      // 分几种使用场景情况
      /**
        (1)只传起点、终点；保证起始点以及线的颜色一致。
        (2)传递数据起点、终点、点颜色、线颜色；根据传参展示对应颜色。
      */
      //  {
      //       "startPointX":118.8062,
      //       "startPointY":31.9208,
      //       "endPointX":119.1543,
      //       "endPointY": 25.0222,
      //       "startPointColor": "red",
      //       "endPointColor": "red",
      //       "lineColor": "red"
      //   }

      //   两个(无其他传参)
      //   const params = [
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //   ];
      // TODO:
      // 起点去重
      // 线的数据不用去重
      // 线的数组，在点数据渲染就配置
      const guangzhouParams = [
        {
          startPointX: 113.267899,
          startPointY: 23.12052,
          endPointX: 113.464942,
          endPointY: 22.888164,
          startPointColor: "yellow",
          endPointColor: "yellow",
          lineColor: "yellow",
        },
        {
          startPointX: 113.737164,
          startPointY: 23.765557,
          endPointX: 113.464942,
          endPointY: 22.888164,
        },
      ];

      const params = [
        {
          startPointX: 113.269704,
          startPointY: 23.12284,
          endPointX: 116.415687,
          endPointY: 39.883246,
          startPointColor: "pink",
          endPointColor: "pink",
          lineColor: "pink",
        },
        {
          startPointX: 113.269704,
          startPointY: 23.12284,
          endPointX: 87.620252,
          endPointY: 43.816515,
          startPointColor: "purple",
          endPointColor: "purple",
          lineColor: "purple",
        },
        {
          startPointX: 113.269704,
          startPointY: 23.12284,
          endPointX: 116.415687,
          endPointY: 39.883246,
          startPointColor: "orange",
          endPointColor: "orange",
          lineColor: "orange",
        },
        {
          startPointX: 113.269704,
          startPointY: 23.12284,
          endPointX: 87.620252,
          endPointY: 43.816515,
          startPointColor: "red",
          endPointColor: "red",
          lineColor: "red",
        },
        {
          startPointX: 87.620252,
          startPointY: 43.816515,
          endPointX: 116.415687,
          endPointY: 39.883246,
          startPointColor: "",
          endPointColor: "",
          lineColor: "",
        },
        {
          startPointX: 126.556047,
          startPointY: 45.296449,
          endPointX: 116.415687,
          endPointY: 39.883246,
          startPointColor: "",
          endPointColor: "",
          lineColor: "",
        },
        {
          startPointX: 93.330529,
          startPointY: 41.598612,
          endPointX: 116.415687,
          endPointY: 39.883246,
          startPointColor: "",
          endPointColor: "",
          lineColor: "",
        },
        {
          startPointX: 106.466199,
          startPointY: 37.820391,
          endPointX: 116.415687,
          endPointY: 39.883246,
          startPointColor: "",
          endPointColor: "",
          lineColor: "",
        },
        {
          startPointX: 89.299301,
          startPointY: 30.029682,
          endPointX: 116.415687,
          endPointY: 39.883246,
          startPointColor: "",
          endPointColor: "",
          lineColor: "",
        },
        {
          startPointX: 101.367928,
          startPointY: 24.542566,
          endPointX: 116.415687,
          endPointY: 39.883246,
          startPointColor: "",
          endPointColor: "",
          lineColor: "",
        },
        {
          startPointX: 108.837231,
          startPointY: 22.916587,
          endPointX: 116.415687,
          endPointY: 39.883246,
          startPointColor: "",
          endPointColor: "",
          lineColor: "",
        },
        {
          startPointX: 103.759577,
          startPointY: 31.365153,
          endPointX: 116.415687,
          endPointY: 39.883246,
          startPointColor: "",
          endPointColor: "",
          lineColor: "",
        },
        {
          startPointX: 117.851906,
          startPointY: 26.479143,
          endPointX: 116.415687,
          endPointY: 39.883246,
          startPointColor: "",
          endPointColor: "",
          lineColor: "",
        },
      ];

      // 16个
      //   const params = [
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 122.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 121.8562,
      //       endPointY: 34.9708,
      //     },
      //   ];

      //   const result = [
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 119.1543,
      //       endPointY: 25.0222,
      //       startPointColor: "red",
      //       endPointColor: "red",
      //       lineColor: "red",
      //     },
      //     {
      //       startPointX: 115.8062,
      //       startPointY: 30.9208,
      //       endPointX: 119.1543,
      //       endPointY: 25.0222,
      //       startPointColor: "red",
      //       endPointColor: "red",
      //       lineColor: "red",
      //     },
      //   ];

      /* 需要处理的数据 */
      //   let pointDataResult;
      //   let mapDataResult;
      let result;

      function handleMapPonitData(handleData) {
        let handleResult = {};
        // 1.颜色组处理
        const colors = handleColors(handleData);
        // 2.数据处理
        console.log("源数据 handleData", handleData);
        handleResult = handleMapPointAndLineData(handleData, colors);

        return handleResult;

        // ---- 辅助函数
        // 处理颜色组
        function handleColors(sourceData) {
          const normalColor = [
            "#4ab2e5",
            "#4fb6d2",
            "#52b9c7",
            "#5abead",
            "#f34e2b",
            "#f56321",
            "#f56f1c",
            "#f58414",
            "#f58f0e",
            "#f5a305",
          ];

          if (sourceData.length <= normalColor.length) {
            return normalColor;
          } else {
            return handleNewColorData();
          }

          // 处理数据与色值不匹配的，再随机生成颜色
          function handleNewColorData() {
            let num = Number(sourceData.length) - Number(normalColor.length);
            const newColors = generateRandomColors(num);
            const renderColors = [...normalColor, ...newColors];
            return renderColors;
          }

          /* 随机颜色 */
          function generateRandomColors(numColors) {
            var colors = [];
            for (var i = 0; i < numColors; i++) {
              var r = Math.floor(Math.random() * 256);
              var g = Math.floor(Math.random() * 256);
              var b = Math.floor(Math.random() * 256);
              colors.push("rgb(" + r + ", " + g + ", " + b + ")");
            }
            return colors;
          }
        }
        // 处理点数据
        function handleMapPointAndLineData(data, colors) {
          let allPoints = [];
          let allLines = [];
          let startPoints = [];
          let endPoints = []; // 存储所有的 endPoint
          let startPointColors = [];
          let endPointColors = [];
          // -------------------------

          const startPointColorField = "startPointColor";
          const endPointColorField = "endPointColor";
          data.forEach((item, itemIdx) => {
            let startPointObj = {
              value: [item.startPointX, item.startPointY],
              itemStyle: {
                color: getColorParams(
                  item,
                  itemIdx,
                  startPointColorField,
                  colors
                ),
              },
            };
            let endPointObj = {
              value: [item.endPointX, item.endPointY],
              itemStyle: {
                color: getColorParams(
                  item,
                  itemIdx,
                  endPointColorField,
                  colors
                ),
              },
            };

            allPoints.push(item);
            startPoints.push(startPointObj);
            endPoints.push(endPointObj);
            startPointColors.push(startPointObj.itemStyle);
            endPointColors.push(endPointObj.itemStyle);
          });

          getLineData();

          /**
           * 处理线的数据
           * */
          function getLineData() {
            const lineColorField = "lineColor";
            data.forEach((item, itemIdx) => {
              let obj = {};
              obj.coords = [
                [item.startPointX, item.startPointY],
                [item.endPointX, item.endPointY],
              ];
              // 如果本身有传入颜色的值，就使用传参的值，否则使用默认颜色值
              if (item.hasOwnProperty(lineColorField) && item[lineColorField]) {
                obj.lineStyle = {
                  color: item[lineColorField],
                };
              } else {
                obj.lineStyle = {
                  color: colors[itemIdx],
                };
              }

              allLines.push(obj);
            });
          }

          // 根据是否有颜色参数传值赋值
          function getColorParams(item, itemIdx, filed, colors) {
            if (item.hasOwnProperty(filed) && item[filed]) {
              return item[filed];
            } else {
              return colors[itemIdx];
            }
          }
          startPoints = pointUniqueData(startPoints);
          endPoints = pointUniqueData(endPoints);
          allPoints = [...startPoints, ...endPoints];
          return {
            pointInfo: {
              allPoints,
              startPoints,
              endPoints,
              startPointColors,
              endPointColors,
            },
            lineInfo: {
              allLines,
            },
          };

          /* 点数据去重: 重复的起点数据去重，如果一样只保留第一个的颜色 */
          function pointUniqueData(dataSource) {
            // 使用一个 Set 来存储已经见过的 value
            const seen = new Set();
            // 创建一个新数组来存储不重复的对象
            const result = [];
            // 遍历原数组
            dataSource.forEach((item) => {
              // 将 value 转换为字符串作为 Set 的键（因为 Set 只能存储原始值或对象引用）
              const valueStr = JSON.stringify(item.value);
              // 如果 value 没有被见过，则添加到结果数组和 Set 中
              if (!seen.has(valueStr)) {
                seen.add(valueStr);
                result.push(item);
              }
            });
            // 返回结果数组
            return result;
          }
        }
      }

      result = handleMapPonitData(params);
      console.log("result", result);
    </script>
  </body>
</html>
